<template>
  <div class="applied">
    <el-empty v-if="!noData"
              description="您未有申请记录.......">
      <el-button type="primary" plain @click="toApplyNow">立即申请</el-button>
    </el-empty>

    <el-table
        :data="vehicleTable"
        style="width: 100%"
        highlight-current-row
        v-if="noData"
        height="600"
        stripe
    >
      <el-table-column
          label="序号"
          type="index">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column
          prop="veName"
          label="车主姓名"
      >
      </el-table-column>
      <el-table-column
          prop="veNumber"
          label="车牌号"
      >
      </el-table-column>
      <el-table-column
          prop="veType"
          label="业务类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.veType == 1">免费</span>
          <span v-else>月租</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="veTime"
          label="申请时间"
          sortable>
        <template slot-scope="scope">
          {{shortTime(scope.row.veTime)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="userPhone"
          label="电话号码"
      >
      </el-table-column>
      <el-table-column
          prop="veStatus"
          label="审核状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.veStatus == 1"><el-tag type="success" size="small" color="">通过</el-tag></span>
          <span v-else-if="scope.row.veStatus ==2 "><el-tag type="info" size="small" color="">待审核</el-tag></span>
          <span v-else><el-tag type="danger" size="small" color="">不通过</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="toVehicleDetail(scope.row.veApplyId)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {getAllVehicleApplyByUserId} from "@/api/allApi";
import {shortTime} from "../../../../../utils/timeFormat";

export default {
  name: "Applied",
  data() {
    return {
      vehicleTable:[],
      noData:false
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  methods:{
    shortTime,
    indexMethod(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
    },
    getAllVehicleApplyByUserId(){
      getAllVehicleApplyByUserId(this.user.userId).then(res=>{
        if (res.data.data.length >0){
          this.noData=true
        }
        this.vehicleTable = res.data.data
      })
    },
    toVehicleDetail(veApplyId){
      this.$router.push({
        path: "/userLayout/userBackground/vehicleDetailUser/"+veApplyId,
      });
    },
    toApplyNow() {
      this.$router.push({
        path: "/userLayout/userBackground/applyNow",
      });
    }
  },
  mounted() {
    this.getAllVehicleApplyByUserId()

  }
}
</script>

<style scoped>

</style>